前端计划——面试题总结-CSS篇

头像
Alarak
    阅读 4 分钟

    前端面试之CSS篇

    1、三种基本引入方式

    1. 外部样式表
      <link rel="stylesheet" type="text/css" href="mystyle.css">

    2. 内部样式表

    <head>
<style>
    hr {color:sienna;}
    p {margin-left:20px;}
    body {background-image:url("images/back40.gif");}
</style>
</head>

    1. 内联
      <p style="color:sienna;margin-left:20px">这是一个段落。</p>

    2、CSS的引入方式中link和@import的区别

    1. link是XHTML标签，除了加载CSS外，还可以定义RSS等其他事务；@import属于CSS范畴，只能加载CSS。

    2. link是XHTML标签，无兼容问题；@import是在CSS2.1提出的，低版本的浏览器不支持。

    3. link引用CSS时，在页面载入时同时加载；@import需要页面网页完全载入以后加载。

    4. link支持使用Javascript控制DOM去改变样式；而@import不支持。

    3、CSS选择器

    选择器优先级为!important >内联 > id > 伪类 = 类class > 属性 > tag >通配

    3.1 基本选择器

    1. 类选择器 .className

    2. ID选择器 #idName

    3. 元素选择器 elementName

    4. 通配选择器 * (效率最低，不推荐用)

    5. 属性选择器 element[attr=value]

    3.2 权重计算

    1. 内联样式表的权值最高 1000；

    2. ID 选择器的权值为 100

    3. Class 类选择器的权值为 10

    4. HTML 标签选择器的权值为 1

    3.3 计算法则

    1. 选择器都有一个权值，权值越大越优先；

    2. 当权值相等时，后出现的样式表设置要优于先出现的样式表设置；

    3. 创作者的规则高于浏览者：即网页编写者设置的CSS 样式的优先权高于浏览器所设置的样式；

    4. 继承的CSS 样式不如后来指定的CSS 样式；

    5. 在同一组属性设置中标有"!important"规则的优先级最大；示例如下：

    3.4组合选择符

    1. 后代选择器（空格符）选取所有后代 A B

    2. 子元素选择器 （大于号）选择某一类型 A>B

    3. 相邻兄弟选择器 （加号）A+B

    4. 普通兄弟选择器 （波浪号）A~B

    4、伪元素与伪类

    4.1 伪类

    CSS伪类匹配被用户激活的元素,接伪类先后顺序被称为LVHA顺序:
    :link
    :visited
    :hover
    :active

    4.2 伪元素

    伪元素添加到选择器，但不是描述特殊状态，它们允许您为元素的某些部分设置样式（CSS3使用双冒号）
    ::after
    ::before
    ::first-letter
    ::first-line
    ::selection

    5、盒式模型

    margin/border/padding/content
    margin:a,b,c,d 上/右/下/左
    margin:a,b,c 上/左右/下
    margin:a,b 上下/左右
    margin:a 上下左右

    6、定位的几种方式：absolute/relative/fixed/static/sticky

    1. absolute
      绝对定位的元素的位置相对于最近的已定位父元素（也就是非static定位），如果元素没有已定位的父元素，那么它的位置相对于<html>。absolute 定位使元素的位置与文档流无关，因此不占据空间。

    2. relative
      相对定位是相对其正常位置。相对于其在普通流中的位置进行定位。可以移动的相对定位元素的内容和相互重叠的元素，它原本所占的空间不会改变。经常被用来做绝对定位的容器块。

    3. fixed
      元素的位置相对于浏览器窗口是固定位置。Fixed定位使元素的位置与文档流无关，因此不占据空间。

    4. static
      HTML元素的默认值，即没有定位，元素出现在正常的流中。 静态定位的元素不会受到 top, bottom, left, right影响。

    5. sticky
      position属性中最有意思的就是sticky了，设置了sticky的元素，在屏幕范围（viewport）时该元素的位置并不受到定位影响（设置是top、left等属性无效），当该元素的位置将要移出偏移范围时，定位又会变成fixed，根据设置的left、top等属性成固定位置的效果。

    可以知道sticky属性有以下几个特点：

    该元素并不脱离文档流，仍然保留元素原本在文档流中的位置。
    当元素在容器中被滚动超过指定的偏移值时，元素在容器内固定在指定位置。亦即如果你设置了top: 50px，那么在sticky元素到达距离相对定位的元素顶部50px的位置时固定，不再向上移动。
    元素固定的相对偏移是相对于离它最近的具有滚动框的祖先元素，如果祖先元素都不可以滚动，那么是相对于viewport来计算元素的偏移量

    7、清除浮动

    浮动元素脱离文档流，不占据空间。浮动元素碰到包含它的边框或者浮动元素的边框停留。

    1. 额外标签
      添加<div style="clear:both;"></div>

    2. 使用overflow
      给包含浮动元素的父标签添加css属性 overflow:auto; zoom:1; zoom:1用于兼容IE6。

    3. 使用after伪对象

    #parent:after{
    /*注意content要有内容*/
    content:".";
    height:0;
    visibility:hidden;
    display:block;
    clear:both;
}

    8、display: none;和visibility: hidden;的区别

    1. 都是隐藏元素，但是前者文档布局中不占用空间，后者仍占用空间

    2. display：none隐藏产生reflow和repaint（回流与重绘）

    3. 前者有株连性，即父元素设置display: none后子元素不管怎样设置都不能显示，而后者的子元素通过设置visibility: visible后还是能显示出来的

    9、float和absolute的异同

    1. 相同点：都使元素脱离文档流，可以设置宽高

    2. 不同点：float仍然占用空间，absolute可以覆盖

    10、box-sizing

    属性作用：主要用来控制元素的盒模型的解析模式。默认值是content-box。

    1. content-box
      元素的宽度/高度由border + padding + content的宽度/高度决定，设置width/height属性指的是content部分的宽/高

    2. border-box
      让元素维持IE传统盒模型（IE6以下版本和IE6~7的怪异模式）。设置width/height属性指的是border + padding + content

    3. inherit
      继承父元素的box-sizing属性

    11、左右布局：左边定宽、右边自适应，不少于3种方法

    //方法一（使用CSS3的flex布局）
.container {
    width: 100%;
    display: flex;
    flex-flow: row nowrap;
}
.left {
    width: 200px;
    height: 200px;
    background: green;
}
.right {
    flex: 1;
    height: 200px;
    background: red;
}
//方法二(使用CSS3的calc()，注意clac表达式中的减号前后有空格)
.left {
    float: left;
    width: 200px;
    height: 200px;
    background: green;
}
.right {
    float: left;
    width: calc(100% - 200px);
    height: 200px;
    background: red;
}
//方法三（不设置宽度，默认填充满）
.left {
    float: left;
    width: 200px;
    height: 200px;
    background: green;
}
.right {
    margin-left: 200px;
    height: 200px;
    background: red;
}
//方法四（绝对定位，注意right部分）
.left {
    position: absolute;
    width: 200px;
    height: 200px;
    background: green;
}
.right {
    position: absolute;
    left: 200px;
    right: 0px;
    height: 200px;
    background: red;
}
//方法五(百分比width，这个方法不是很好使，百分比不好确定)
.left {
    float: left;
    width: 200px;
    height: 200px;
    background: green;
}
.right {
    float: left;
    width: 85%;
    height: 200px;
    background: red;
}
//方法六（表格方式，不推荐使用）

    12、div水平垂直居中实现方式

    /*方法一：使用flex布局*/
/*加入边框和宽高便于浏览器测试*/
.parent {
    border: 1px solid black;
    display:flex;
    justify-content: center;
    align-items: center;
}
.child {
    border: 1px solid black;
    width: 400px;
    height: 400px;
}
/*方法二：绝对定位，左右都是50%，margin-left和top分别为自身一半值的负数*/
.parent {
    position: relative;
}
.child {
    border: 1px solid black;
    width: 400px;
    height: 200px;
    position: absolute;
    left: 50%;
    top: 50%;
    margin-left: -200px;
    margin-top: -100px;
}
/*方法三：还是绝对定位，但使用transform*/
.parent{
    position: relative;
}
.child {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
    css前端
    Alarak
    246 声望21 粉丝
    « 上一篇
    网易2018校招前端笔试题解析

    引用和评论

    推荐阅读
    头像
    网页设计的垂直居中

    寒青赞 39阅读 4.6k评论 3

    头像
    CSS团队协作规范

    寒青赞 36阅读 4k

    头像
    100个React最佳实践小技巧

    夕水赞 17阅读 2.7k评论 4

    头像
    不使用 JS 纯 CSS 获取屏幕宽高

    南城FE赞 15阅读 2.2k评论 3

    头像
    前端开发工具

    寒青赞 15阅读 4.7k

    头像
    开发插件集合

    寒青赞 12阅读 3.1k

    头像
    CSS 现在终于支持高度 auto 过渡动画了

    XboxYan赞 12阅读 2.6k

    0 条评论
    得票最新